<template>
	<div class="hello">
		<h1>{{msg}}</h1>
	</div>
</template>

<script>
	export default {
		name: 'HelloWorld',

		data() {
			return {
				msg: "初始值"
			}
		},


		created() { // 页面创建生命周期函数
			this.initWebSocket()
		},
		destroyed: function() { // 离开页面生命周期函数
			this.websocketclose();
		},
		methods: {
			initWebSocket: function() {
				// WebSocket与普通的请求所用协议有所不同，ws等同于http，wss等同于https
				this.websock = new WebSocket("ws://127.0.0.1:9090/msgWebsocket/zhangsang");
				this.websock.onopen = this.websocketonopen;
				this.websock.onerror = this.websocketonerror;
				this.websock.onmessage = this.websocketonmessage;
				this.websock.onclose = this.websocketclose;
			},
			websocketonopen: function() {
				console.log("WebSocket连接成功");
			},
			websocketonerror: function() {
				console.log("WebSocket连接发生错误");
			},
			websocketonmessage: function(e) {
				console.log(e.data);
				this.msg = e.data
			},
			websocketclose: function(e) {
				console.log("connection closed (" + e.code + ")");
			}

		}
	}
</script>

<style scoped>
	h3 {
		margin: 40px 0 0;
	}

	ul {
		list-style-type: none;
		padding: 0;
	}

	li {
		display: inline-block;
		margin: 0 10px;
	}

	a {
		color: #42b983;
	}
</style>
